/*
 * Copyright (c) 2010 Nokia Corporation.
 */

import Qt 4.7

Rectangle {
    id: myItem

    property bool selectedRow: false
    property string fullpath
    property int imageHeight

    property variant scaledSize: MyQtEngine.scaledPicture(model.modelData,imageHeight,imageHeight)
    property int scaledImageHeight: scaledSize.height
    property int scaledImageWidth: scaledSize.width

    signal rowSelected()

    rotation: MyQtEngine.randInt(-10,10)

    width:scaledImageWidth
    height:scaledImageHeight

    border.color: "white"
    border.width: 4

    color: "black"
    smooth: true

    Image {
        id: myImage
        z:2
        smooth: true
        anchors.fill: parent
        width: scaledImageWidth
        height: scaledImageHeight
        sourceSize.width: scaledImageWidth
        sourceSize.height: scaledImageHeight
        asynchronous: true
        source: "file:" + model.modelData
    }

    Text {
        z:1
        color: "white"
        visible: myImage.status == Image.Ready ? false : true
        smooth: true
        font.weight: Font.Light
        anchors.verticalCenter: parent.verticalCenter
        text: {
            fullpath = model.modelData
            MyQtEngine.imageName(model.modelData)
            //console.log(model.modelData)
        }
    }

    Timer {
        id: timer
        interval: 500; running: false; repeat: false
        onTriggered: {
            myItem.state = ""
        }
    }

    states: [
        State {
            name: "down";
            PropertyChanges { target:myItem; border.width: gridView.focusOffWidth }
        },
        State {
            name: "down"; when: selectedRow;
            PropertyChanges { target:myItem; border.width: gridView.focusOffWidth }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "down"
            SequentialAnimation {
                PropertyAnimation {
                    properties: "border.width";
                    from: gridView.focusOffWidth;
                    to: gridView.focusOnWidth;
                    duration: 200;
                    easing.type: Easing.Linear
                }
                PropertyAnimation {
                    properties: "border.width";
                    from: gridView.focusOnWidth;
                    to: gridView.focusOffWidth;
                    duration: 200;
                    easing.type: Easing.Linear
                }
            }
        }
    ]

    function selectPicture() {
        myItem.rowSelected()
        myItem.state = "down"
        if (gridView.removeFocus) {
            timer.running = false
            timer.running = true
        }
    }

    MouseArea {
        id: mouseArea;
        anchors.fill: parent
        onClicked: {
            selectPicture()
        }
    }

    Keys.onSpacePressed: { selectPicture() }
    Keys.onSelectPressed: { selectPicture() }
    Keys.onEnterPressed: { selectPicture() }
}
